<template>
  <div class="app-container">
  <div class="filter-container">
        <el-button type="primary"  @click="addClick()" style="margin-left:0px;">新增采购单</el-button>
        <el-button type="primary"  @click="overflowClick()" style="margin-left:10px;">报溢入库</el-button>
        <el-input clearable v-model="search.number" placeholder="入库单号" style="width: 170px;margin-left:10px;"></el-input>
        <el-input clearable v-model="search.number" placeholder="精品名称" style="width: 170px;margin-left:10px;"></el-input>
        
        <el-date-picker v-model="search.daterange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="margin-left:10px;">
        </el-date-picker>

        <el-button type="primary" icon="el-icon-search" @click="searchClick()" style="margin-left:10px;">查询</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" 
      border fit highlight-current-row stripe  style="width: 100%">
      <el-table-column align="center" label="序" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row._id }}</span>
        </template>
      </el-table-column>
      
     <el-table-column  min-width="100" align="center" label="入库单号">
        <template slot-scope="scope">
          <span>{{ scope.row.number }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="入库类型">
        <template slot-scope="scope">
          <span>{{ scope.row.entrytype | parseEntryType }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="入库成本">
        <template slot-scope="scope">
          <span>{{ scope.row.partcategory }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="精品名称">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="付款类型">
        <template slot-scope="scope">
          <span>{{ scope.row.paytype |parsePayType }}</span>
        </template>
      </el-table-column>      
      <el-table-column  min-width="100" align="center" label="入库状态">
        <template slot-scope="scope">
          <span>{{ scope.row.entrystate | parseEntryState }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="财务付款状态">
        <template slot-scope="scope">
          <span>{{ scope.row.paystate | parsePayState }}</span>
        </template>
      </el-table-column>
      
      <el-table-column  min-width="100" align="center" label="日期">
        <template slot-scope="scope">
          <span>{{ scope.row.createtime | parseTime('{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      
      <el-table-column align="center" label="操作"  width="280" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="tableRowClick().edit(scope.row.id)">修改</el-button>
          <el-button type="primary" size="small" @click="tableRowClick().entry(scope.row.id)">入库</el-button>
          <el-button type="danger" size="small" @click="tableRowClick().delete(scope.row.id)">删除</el-button>
          <el-button type="primary" size="small" @click="tableRowClick().details(scope.row.id)">详情</el-button>
          
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.rows" @pagination="fetchData" />

<!-- 新增/编辑 -->
<el-dialog :title="dialogEdit.title" :visible.sync="dialogEdit.visible"  width="700px">
    <div class="ci">
        <div class="item">
            <span class="name">精品名称：</span>
            <span class="value">
                <el-input clearable v-model="dialogEdit.data.name" style="width:220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name">付款类型：</span>
            <span class="value">
                <el-select v-model="dialogEdit.data.paytype" clearable placeholder="付款类型" style="width: 220px;">
                    <el-option 
                    v-for="(item,index) in selectOptions.paytype"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </span>
        </div>
        <div class="item">
            <span class="name">数量：</span>
            <span class="value">
                <el-input clearable v-model="dialogEdit.data.count" style="width:220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name">采购单价：</span>
            <span class="value">
                <el-input clearable v-model="dialogEdit.data.price" style="width:220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name">供应商：</span>
            <span class="value">
                <el-input clearable v-model="dialogEdit.data.supplier" style="width:220px;"></el-input>
            </span>
        </div>
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button   @click="dialogEdit.visible = false">关 闭</el-button>
        <el-button  type="primary" @click="dialogEditClick().save()">保 存</el-button>
    </div>
</el-dialog>
<!-- end 新增/编辑 -->

<!-- 报溢入库 -->
<el-dialog :title="dialogOverflow.title" :visible.sync="dialogOverflow.visible"  width="700px">
    <div class="ci">
        <div class="item">
            <span class="name">精品名称：</span>
            <span class="value">
                <el-input v-model="dialogEntry.data.name" style="width:220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name">数量：</span>
            <span class="value">
                <el-input v-model="dialogEntry.data.count" style="width:220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name">仓库名称：</span>
            <span class="value">
                <el-input clearable="" v-model="dialogEntry.data.storename" style="width:220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name">货位名称：</span>
            <span class="value">
                <el-input clearable="" v-model="dialogEntry.data.storeplace" style="width:220px;"></el-input>
            </span>
        </div>
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button   @click="dialogOverflow.visible = false">关 闭</el-button>
        <el-button  type="primary" @click="dialogOverflowClick().save()">保 存</el-button>
    </div>
</el-dialog>
<!-- end 报溢入库 -->

<!-- 入库 -->
<el-dialog :title="dialogEntry.title" :visible.sync="dialogEntry.visible"  width="900px">
    <div class="ci">
        <div class="item">
            <span class="name">配件名称：</span>
            <span class="value">
                <el-input disabled v-model="dialogEntry.data.partname" style="width:220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name">配件编码：</span>
            <span class="value">
                <el-input disabled v-model="dialogEntry.data.partcode" style="width:220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name">配件数量：</span>
            <span class="value">
                <el-input disabled v-model="dialogEntry.data.count" style="width:220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name">仓库名称：</span>
            <span class="value">
                <el-input clearable="" v-model="dialogEntry.data.storename" style="width:220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name">仓位名称：</span>
            <span class="value">
                <el-input clearable="" v-model="dialogEntry.data.storeplace" style="width:220px;"></el-input>
            </span>
        </div>
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button   @click="dialogEntry.visible = false">关 闭</el-button>
        <el-button  type="primary" @click="dialogEntryClick().save()">保 存</el-button>
    </div>
</el-dialog>
<!-- end 入库 -->


  </div>
</template>

<script>
import * as boutiqueApi from '@/api/boutique/index'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import * as enumHelper from '@/utils/enum'
import {objectMerge,objectEmpty} from '@/utils/index'

export default {
    components: { Pagination },
    data(){
        return{
            enableProcesscyle:true,
            search:{ 
                number:'',
                customer:'',
                phone:'',
                daterange:'',
            },
            listQuery: {
                    page: 1,
                    rows: 20,
                    name:'',
                    phone:'',
                    state:-1,
            },
            list:null,
            listLoading:false,
            total:0,
            selectOptions:{
                paytype:[]
            },

            dialogEdit:{
                visible:false,
                saveloading:false,
                title:'新增/编辑',
                data:{
                    number:'',
                    name:'',
                    count:'',
                    paytype:'',
                    price:'',
                    supplier:'',
                }
            },
            dialogOverflow:{
                visible:false,
                saveloading:false,
                title:'报溢入库',
                data:{
                    name:'',
                    count:'',
                    storename:'',
                    storeplace:'',
                }
            },
            dialogEntry:{
                visible:false,
                saveloading:false,
                title:'入库',
                data:{
                    id:'',
                    partcode:'',
                    partname:'',
                    count:'',
                    storename:'',
                    storeplace:'',
                }
            }
        }
    },
    created(){
        var that=this;
        //初始化下拉菜单
        enumHelper.initOptions(that.selectOptions.paytype,enumHelper.boutique.payType);
        that.fetchData();
    },
    filters:{
      parsePayType(val){
        return enumHelper.boutique.payType.getName(val);
      },
      parseEntryType(val){
        return enumHelper.boutique.entryType.getName(val);
      },
      parseEntryState(val){
        return enumHelper.boutique.entryState.getName(val);
      },
      parsePayState(val){
        return enumHelper.boutique.payState.getName(val);
      },

    },
    methods:{
        fetchData(){
          var that=this;
            boutiqueApi.getBoutiqueEntryList({}).then(res=>{
              if(res.data){
                that.list=[...res.data.items.map((item,index)=>{
                  item._id=index+1;
                  return item;
                })];
                that.total=res.data.total;
              }
            })
        },
        refreshClick(){
          this.fetchData();
        },
        addClick(){
            var that=this;
            that.dialogEditClick().init();
            that.dialogEdit.visible=true;
        },
        overflowClick(){
            var that=this;
            that.dialogOverflowClick().init();
            that.dialogOverflow.visible=true;
        },
        otherEntryClick(){

        },
        tableRowClick(){
            var that=this;
            return {
                edit(id){
                    var data=that.list.filter(o=>o.id==id)[0];
                    that.dialogEditClick().init(data);
                    that.dialogEdit.visible=true;
                },
                entry(id){
                    var data=that.list.filter(o=>o.id==id)[0];
                    that.dialogEntryClick().init(data);
                    that.dialogEntry.visible=true;
                },
                delete(id){
                   that.$confirm('确定删除这条记录码?', '提示', {
                        confirmButtonText: '确定', cancelButtonText: '取消',type: 'warning'}).then(() => {
                        that.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }).catch(() => {
                        that.$message({
                        type: 'info',
                        message: '已取消删除'
                        });          
                    });
                },
                details(id){
                    
                },
            }
        },
        dialogEditClick(){
            var that=this;
            var dg=that.dialogEdit;
            return {
                init(data){
                    data?objectMerge(dg.data,data):objectEmpty(dg.data);
                },
                save(){

                }
            }
        },
        dialogOverflowClick(){
            var that=this;
            var dg=that.dialogOverflow;
            return {
                init(data){
                    data?objectMerge(dg.data,data):objectEmpty(dg.data);
                },
                save(){
                    dg.visible=false;
                }
            }
        },
        dialogEntryClick(){
            var that=this;
            var dg=that.dialogEntry;
            return {
                init(data){
                    data?objectMerge(dg.data,data):objectEmpty(dg.data);
                },
                save(){

                }
            }
        },

    }
}
</script>

<style>

</style>